<template>
    <div class="page-apply">
        <div class="list-item before-line after-line normal-text">
            <span class="list-item-left">姓名</span>
            <div class="list-item-content">
                <input v-model="name" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="list-item after-line normal-text">
            <span class="list-item-left">手机号</span>
            <div class="list-item-content">
                <input v-model="mobile" class="list-input right block" placeholder="必填" type="text">
            </div>
        </div>
        <div class="btn-wrap">
            <div class="btn btn-mobile btn-red btn-large btn-block btn-round" @click="onClickSubmit">
                提交
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import {
    placeholderImg,
} from '@/lib/utils';

import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'PartnerInviteRecord',
})
export default class PartnerInviteRecord extends Vue {
    public name: any = '';
    public mobile: any = '';
    public placeholderImg: any = placeholderImg;

    /**
     * 点击提交
     */
    public async onClickSubmit() {
        if (!this.name || !this.mobile) {
            wx.showToast({
                title: '请填写完整',
                icon: 'none',
            });
            return;
        }
        if (!/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.mobile)) {
            wx.showToast({
                title: '请正确填写手机号',
                icon: 'none',
            });
            return;
        }
        store.commit('utils/startRequest');
        const res = await store.dispatch('user/addInviteRecord', {
            name: this.name,
            mobile: this.mobile,
        });
        if (res.statusCode === 200 && res.data.status === 0) {
            wx.showToast({
                title: '提交成功',
            });
            this.name = '';
            this.mobile = '';
        } else {
            wx.showToast({
                title: res.data.message,
                icon: 'none',
            });
        }
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-apply {
    .list-item {
        padding: 30rpx 40rpx;
        .list-item-left {
            line-height: 52rpx;
        }
    }
    .btn-wrap {
        padding: 30rpx 30rpx 10rpx;
    }
}

</style>
